<template>
  <div class="app-container">

    <CustomContent>
      <template v-slot:body>

        <el-tabs v-model="queryParams.dateType" @tab-click="getList">

          <el-tab-pane label="节假日" name="1">
            <el-radio-group v-model="queryParams.isEffective" style="margin-bottom: 30px;" @change="getList">
              <el-radio-button label="1">生效节假日</el-radio-button>
              <el-radio-button label="0">失效节假日</el-radio-button>
            </el-radio-group>
          </el-tab-pane>

          <el-tab-pane label="特殊时段" name="2">
            <el-radio-group v-model="queryParams.isEffective" style="margin-bottom: 30px;" @change="getList">
              <el-radio-button label="1">生效时段</el-radio-button>
              <el-radio-button label="0">失效时段</el-radio-button>
            </el-radio-group>
          </el-tab-pane>
        </el-tabs>

        <el-table v-loading="loading" :data="dateList" border>
          <el-table-column :label="queryParams.dateType===1?'节假日名称':'时段名称'" align="center" prop="dateName">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isEffective===1" v-model="scope.row.dateName" maxlength="20" show-word-limit placeholder="请输入日期名称" clearable size="small"/>
              <span v-else>{{ scope.row.dateName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="日期" align="center" prop="startTime">
            <template slot-scope="scope">
              <el-date-picker size="small" v-model="scope.row.daterange" type="daterange" :picker-options="pickerOptions"
                              value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"
                              @change="timeChange(scope.row, $event)" range-separator="至" v-if="scope.row.isEffective==1">
              </el-date-picker>
              <span v-else>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}至{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" v-if="queryParams.isEffective==1">
            <template slot-scope="{ row }">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteChargingItems(row)"  v-if="queryParams.dateType==2">删除</el-button>
              <el-switch
                v-if="queryParams.dateType==1"
                class="my-date-switch"
                v-model="row.isEnable"
                :active-value="1"
                :inactive-value="0"
                active-text="开"
                inactive-text="关"
                @change="upEnable(row, $event)">
              </el-switch>

            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="queryParams.isEffective==0&&total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>


        <el-row style="text-align: center;margin: 10px" v-if="queryParams.dateType==2&&queryParams.isEffective==1">
          <el-button icon="el-icon-plus" @click="addChargingItems">新增时段</el-button>
        </el-row>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="resetQuery" v-if="queryParams.isEffective==1">重置</el-button>
          <el-button type="primary" :loading="loading" @click.native="submitForm" v-if="queryParams.isEffective==1">保存</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import {listDate, addListDate, delDate ,updateDate} from "@/api/plan/date";
import CustomContent from "@/components/custom/content";

export default {
  name: "Date",
  components: {
    CustomContent
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 特殊时段表格数据
      dateList: [],
      deleteList: [],
      activeName: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateName: null,
        startTime: null,
        endTime: null,
        dateType: '1',
        isEffective: 1,
      },
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() < (Date.now()-1000*60*60*24)//选当前时间之后的时间
        }
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询特殊时段列表 */
    getList() {
      this.loading = true;
      listDate(this.queryParams).then(response => {
        this.dateList = response.rows;
        this.deleteList = [];
        this.total = response.total;
        this.loading = false;
      });
    },
    upEnable(row){
      updateDate({dateId:row.dateId,isEnable:row.isEnable}).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.getList();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.getList();
    },
    addChargingItems() {
      this.dateList.push({
        dateId: null,
        dateName: null,
        startTime: null,
        endTime: null,
        daterange: null,
        dateType: 2,
        isEffective: 1
      })
    },
    deleteChargingItems(row) {
      const index = this.dateList.map(f => f.dateName).indexOf(row.dateName);
      this.dateList.splice(index, 1)
      if (row.dateId) {
        this.deleteList.push(row.dateId)
      }
    },
    timeChange(row, e) {
      row.startTime = e[0];
      row.endTime = e[1];
    },

    checkTime(times) {
      for (let i = 0; i < times.length; i++) {
        for (let j = i + 1; j < times.length; j++) {
          let start1 = new Date(times[i].startTime).getTime();
          let end1 = new Date(times[i].endTime).getTime();
          let start2 = new Date(times[j].startTime).getTime();
          let end2 = new Date(times[j].endTime).getTime();
          if (start2 >= start1 && start2 <= end1) {
            this.$modal.msgError(times[j].startTime+ " 至 "+times[j].endTime+"时间重复配置");
            return false;
          } else if (start1 >= start2 && start1 <= end2) {
            this.$modal.msgError(times[j].startTime+" 至 "+times[j].endTime+"时间重复配置");
            return false;
          }
        }
      }
      return true;
    },


    /** 提交按钮 */
    submitForm() {
      if (this.deleteList.length > 0) {
        delDate(this.deleteList.join(','))
      }
      if (!this.dateList || this.dateList.length === 0) {
        return false;
      } else {
        for (let item of this.dateList) {
          if (!item.dateName) {
            this.$modal.msgError("请输入时段名称");
            return false;
          }
          if (!item.startTime || !item.endTime) {
            this.$modal.msgError("请选择日期");
            return false;
          }
        }
        if(this.checkTime(this.dateList)){
          addListDate(this.dateList).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.getList();
          });
        }
      }

    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有特殊时段数据项？').then(() => {
        this.exportLoading = true;
        return exportDate(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    }
  }
};
</script>

<style lang="scss">
.my-date-switch {
  margin-left: -50px;
  .el-switch__label--left {
    position: relative;
    left: 85px;
    color: #fff;
    z-index: -1111;
    span {
      width: 80px;
    }
  }
  .el-switch__label--right {
    position: relative;
    right: 65px;
    color: #fff;
    z-index: -1111;
    span {
      display: inline-block;
      width: 40px;
    }
  }
  .el-switch__core {
    width: 65px !important;
  }
  .el-switch__label--right.is-active {
    z-index: 10;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 10;
    color: #fff !important;
  }
  .el-switch__core {
    height: 24px !important;
    border-radius: 12px !important;
  }
  .el-switch__core:after {
    top: 3px;
    left: 5px;
  }
  .el-switch.is-checked .el-switch__core::after {
    margin-left: -20px;
  }
}
</style>
